<template>
  <div class="health-dashboard">
    <!-- 顶部信息卡片区 -->
    <Row :gutter="16" class="top-cards">
      <Col span="8">
        <Card class="info-card">
          <div class="card-title">当前BMI指数</div>
          <div class="bmi-value">25.3</div>
          <div class="bmi-status">过重</div>
          <div class="bmi-desc">较上周下降了0.5，继续保持！</div>
        </Card>
      </Col>
      <Col span="8">
        <Card class="info-card">
          <div class="card-title">本周锻炼目标</div>
          <div class="target-value">86%</div>
          <div class="target-progress">
            <Progress :percent="86" status="success" />
          </div>
          <div class="target-desc">5/7天</div>
        </Card>
      </Col>
      <Col span="8">
        <Card class="info-card">
          <div class="card-title">今日步数</div>
          <div class="steps-value">7,532</div>
          <div class="steps-status">进行中</div>
          <div class="steps-desc">距离目标10,000步还有2,468步</div>
        </Card>
      </Col>
    </Row>

    <!-- 图表区（复用现有Charts组件） -->
    <Charts />

    <!-- 今日健康建议（复用现有HealthTips组件） -->
    <HealthTips />

    <!-- 功能导航（复用现有FeatureNav组件） -->
    <FeatureNav />

    <!-- 健康报告区 -->
    <Card class="report-card">
      <div slot="title">
        <Icon type="ios-document" size="16" class="mr-1" />
        健康报告
      </div>
      <div class="report-content">
        <div class="report-item">
          <div class="report-label">本月概览</div>
          <div class="report-detail">
            <div class="detail-item">
              <div class="detail-label">平均BMI指数</div>
              <div class="detail-value">25.6</div>
            </div>
          </div>
        </div>
        <div class="report-item">
          <div class="report-label">健康评分</div>
          <div class="report-score">
            <Progress :percent="82" status="success" />
          </div>
        </div>
        <Button type="primary" class="export-btn">导出报告</Button>
      </div>
    </Card>
  </div>
</template>

<script>
import Charts from '@/components/health/Charts'; // 引入图表组件
import HealthTips from '@/components/health/HealthTips'; // 引入健康建议组件
import FeatureNav from '@/components/health/FeatureNav'; // 引入功能导航组件
import { Row, Col, Card, Icon, Progress, Button } from 'view-design'; // 引入View UI组件

export default {
  name: 'HealthDashboard',
  components: {
    Row,
    Col,
    Card,
    Icon,
    Progress,
    Button,
    Charts,
    HealthTips,
    FeatureNav
  }
};
</script>

<style lang="less" scoped>
.health-dashboard {
  padding: 16px;
}

.top-cards {
  margin-bottom: 20px;
}

.info-card {
  .card-title {
    font-size: 14px;
    color: #606266;
    margin-bottom: 10px;
  }
  .bmi-value, .target-value, .steps-value {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 8px;
  }
  .bmi-status {
    display: inline-block;
    padding: 2px 8px;
    background: #f56c6c;
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
    margin-bottom: 8px;
  }
  .target-progress {
    margin-bottom: 8px;
  }
  .steps-status {
    display: inline-block;
    padding: 2px 8px;
    background: #409eff;
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
    margin-bottom: 8px;
  }
  .bmi-desc, .target-desc, .steps-desc {
    font-size: 12px;
    color: #909399;
  }
}

.report-card {
  .report-content {
    .report-item {
      margin-bottom: 16px;
      &:last-child {
        margin-bottom: 0;
      }
      .report-label {
        font-size: 14px;
        color: #606266;
        margin-bottom: 8px;
      }
      .report-detail {
        .detail-item {
          display: flex;
          justify-content: space-between;
          .detail-label {
            font-size: 13px;
            color: #8392a5;
          }
          .detail-value {
            font-size: 13px;
            color: #1f2d3d;
          }
        }
      }
      .report-score {
        width: 120px;
      }
    }
    .export-btn {
      float: right;
    }
  }
}
</style>